import { useState, useEffect } from 'react'
import dayjs from 'dayjs'
import { Stepper, Calendar, Popup } from "antd-mobile"
import { DeleteOutline } from "antd-mobile-icons"
import "./date.less"
import Home from '../../api/home'
import style from "./style.module.scss"
import { useNavigate } from 'react-router-dom'
const { header, on, main, bottom, Box, small, search, provinceBox, peopleItem, peoples, count, nav, context, active, next, show, long, when, time, border, go, searchBox, historyBox } = style
const today = dayjs()

const Index = () => {
  const [index, setIndex] = useState(0)
  const [userid] = useState(sessionStorage.getItem("userid") || "")
  const [navIndex, setNavIndex] = useState(0)
  const [headerT, setHeaderT] = useState(0)
  const [headerH, setHeaderH] = useState(0)
  const [headerB, setHeaderB] = useState(0)
  const [mapP, setMapP] = useState(0)
  const [mapH, setMapH] = useState(0)
  const [smallP, setSmallP] = useState("0px 20px")
  const [smallH, setSmallH] = useState(0)
  const [bottomT, setBottomT] = useState(130)
  const [provinceList, setProvinceList] = useState([])
  const [historyList, setHistoryList] = useState([])
  const navigate = useNavigate()
  const [showMap, setShowMap] = useState(true)
  const [showDate, setShowDate] = useState(false)
  const [showPeople, setShowPeople] = useState(false)
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [boderIndex, setBoderIndex] = useState(0)
  const [searchPlace, setSearchPlace] = useState("")
  const [place, setPlace] = useState("随便看看")
  const [date, setDate] = useState("添加日期")
  const [petvalue, setpetvalue] = useState<number>(0)
  const [manvalue, setmanvalue] = useState<number>(0)
  const [childvalue, setchildvalue] = useState<number>(0)
  const [babyvalue, setbabyvalue] = useState<number>(0)
  const [pepole, setPeople] = useState("添加房客")
  const [val, setVal] = useState<any>(today.toDate())


  const getProviceList = async () => {
    let res = await Home["getProvinceList"]()
    if (res.status === 200) {
      setProvinceList(res.data)
    }
  }

  const getHistoryList = async () => {
    if (userid !== "") {
      let res = await Home["getHistory"](userid)
      if (res.status === 200) {
        setHistoryList(res.data)
      }
    }
  }

  const delHistory = async (id: number) => {
    let res = await Home["delHistory"](id)
    if (res.status === 200) {
      getHistoryList()
    }
  }

  useEffect(() => {
    setPeople(manvalue || childvalue || babyvalue || petvalue ? `${manvalue ? childvalue ? manvalue + childvalue + '人' : manvalue + '人' : childvalue + '人'}  ${babyvalue ? ',' + babyvalue + '名婴幼儿' : ''} ${petvalue ? ',' + petvalue + '只宠物' : ''}` : "添加房客")
  }, [showPeople])

  useEffect(() => {
    setTimeout(() => {
      setHeaderT(18)
      setHeaderH(33)
      setHeaderB(9)
      setMapP(24)
      setMapH(276)
      setSmallP("20px 20px")
      setSmallH(16)
      setBottomT(0)
    }, 200)
  }, [])
  useEffect(() => {
    getProviceList()
    getHistoryList()
  }, [])

  const submit = async (flag: boolean,item:any = "") => {
    let people = manvalue || childvalue || babyvalue || petvalue ? `${manvalue ? childvalue ? manvalue + childvalue + '人' : manvalue + '人' : childvalue + '人'}  ${babyvalue ? ',' + babyvalue + '名婴幼儿' : ''} ${petvalue ? ',' + petvalue + '只宠物' : ''}` : "添加房客"
    if (flag) {
      let res = await Home["addHistory"]({ place, time: date, userid, people })
      if (res.status === 201) {
        navigate("/searchresults", { state: { info: { place, date, people } } })
      }
    }else{
        navigate("/searchresults", { state: { info: { place:item.place, date:item.time, people:item.people } } })
    }
  }

  return <div style={{ background: "#f7f7f7" }}>
    <div className={header} style={{ paddingTop: headerT, height: headerH, paddingBottom: headerB }}>
      <button onClick={()=> navigate("/")}>×</button>
      <span className={index === 0 ? on : ""} onClick={() => setIndex(0)}>住宿</span>
      <span className={index === 1 ? on : ""} onClick={() => setIndex(1)}>体验</span>
    </div>
    <div className={main}>
      {
        showMap ? <div className={Box} style={{ padding: mapP, height: mapH }}>
          <h3>要去哪里？</h3>
          <div className={search} onClick={() => setVisible2(true)}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{ display: "block", height: "16px", width: "16px", marginRight: "10px", fill: "currentcolor" }}><path d="M13 0a13 13 0 0 1 10.5 20.67l7.91 7.92-2.82 2.82-7.92-7.91A12.94 12.94 0 0 1 13 26a13 13 0 1 1 0-26zm0 4a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"></path></svg></div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", color: "#717171", fontWeight: 'bold' }}>搜索目的地</div>
          </div>
          <div style={{ marginTop: "18px", display: "flex", overflowX: "auto", overflowY: "hidden" }} className={provinceBox}>
            {
              provinceList.map((item: any) => <div onClick={() => { setPlace(item.title); setShowMap(false); setShowDate(true) }} key={item.id} style={{ flexShrink: "0", width: "123px", height: "158px", marginRight: "20px" }}>
                <img src={item.img} alt="" />
                <span style={{ display: "block", marginTop: "8px", marginLeft: "2px" }}>{item.title}</span>
              </div>)
            }
          </div>
        </div> : <div onClick={() => { setShowMap(true); setShowDate(false); setShowPeople(false) }} className={small} style={{ padding: smallP, height: smallH }}><span>地点</span><span>{place}</span></div>
      }
      {
        showDate ? <div className={Box}>
          <h3>行程何时开始？</h3>
          <div className={nav}>
            <span className={navIndex === 0 ? active : ""} onClick={() => setNavIndex(0)}> 指定日期</span>
            <span className={navIndex === 1 ? active : ""} onClick={() => setNavIndex(1)}>月租</span>
            <span className={navIndex === 2 ? active : ""} onClick={() => setNavIndex(2)}>日期灵活</span>
          </div>
          <div className={context}>
            <div className={navIndex === 0 ? show : ""} onClick={() => setNavIndex(0)}>
              <Calendar
                className='calendar-custom'
                selectionMode='range'
                value={val}
                onChange={val => {
                  setVal(val)
                  setDate(`${val && val[0].getMonth() + 1}月${val && val[0].getDate()}日至${val && val[1].getMonth() + 1}月${val && val[1].getDate()}日`)
                }}
              />
            </div>
            <div className={navIndex === 1 ? show : ""} onClick={() => setNavIndex(1)}>
              <div style={{ marginTop: '16px' }}>
                <div className={peopleItem} style={{ borderBottom: '1px solid #ddd' }}>
                  <div className={peoples}>
                    <b>月</b>
                  </div>
                  <div >
                    <Stepper
                      min={1}
                      max={12}
                      className={count}
                      defaultValue={0}
                      style={{
                        "--input-font-size": "16px"
                      }}
                    />
                  </div>
                </div>
                <div style={{ display: 'flex', fontSize: '16px', justifyContent: "space-between", margin: "24px 0" }}>
                  <b>入住日期</b> <u onClick={() => setVisible(true)} style={{ fontWeight: "bold" }}>8月1日</u>
                  <Popup
                    visible={visible}
                    onMaskClick={() => {
                      setVisible(false)
                    }}
                    bodyStyle={{
                      borderTopLeftRadius: '8px',
                      borderTopRightRadius: '8px',
                      minHeight: '40vh',
                    }}
                  >
                    <Calendar
                      className='calendar-custom'
                      selectionMode='single'
                      onChange={val => {
                        console.log(val);
                      }}
                    />
                  </Popup>
                </div>
              </div>
            </div>
            <div className={navIndex === 2 ? show : ""} onClick={() => setNavIndex(2)}>
              <div className={long}>
                <h4>您想住多久?</h4>
                <div className={time}>
                  <span className={boderIndex === 0 ? border : ""} onClick={() => setBoderIndex(0)}>周末</span>
                  <span className={boderIndex === 1 ? border : ""} onClick={() => setBoderIndex(1)}>一周</span>
                  <span className={boderIndex === 2 ? border : ""} onClick={() => setBoderIndex(2)}>一个月</span>
                </div>
                <div className={when}>
                  <h4>您打算在何时出行？</h4>
                  <div className={go}>
                    <div>
                      <img src="https://a0.muscache.com/pictures/cf82c9bc-520a-4486-9be4-1f0927972381.jpg" alt="" />
                      <span>8 月</span>
                      <span>2023</span>
                    </div>
                    <div>
                      <img src="https://a0.muscache.com/pictures/cf82c9bc-520a-4486-9be4-1f0927972381.jpg" alt="" />
                      <span>9 月</span>
                      <span>2023</span>
                    </div>
                    <div>
                      <img src="https://a0.muscache.com/pictures/cf82c9bc-520a-4486-9be4-1f0927972381.jpg" alt="" />
                      <span>10 月</span>
                      <span>2023</span>
                    </div>
                    <div>
                      <img src="https://a0.muscache.com/pictures/cf82c9bc-520a-4486-9be4-1f0927972381.jpg" alt="" />
                      <span>11 月</span>
                      <span>2023</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={next}>
            <u onClick={() => { setVal(() => today.toDate()); setDate("添加日期") }}>重置</u>
            <button onClick={() => { setShowDate(false); setShowPeople(true) }}>下一步</button>
          </div>
        </div> : <div onClick={() => { setShowMap(false); setShowDate(true); setShowPeople(false) }} className={small} style={{ padding: smallP, height: smallH }} ><span>时间</span><span>{date}</span></div>
      }
      {
        showPeople ? <div className={Box} style={{ padding: mapP, height: mapH }}>
          <h3>谁将同行？</h3>
          <div>
            <div className={peopleItem}>
              <div className={peoples}>
                <b>成人</b>
                <span>13 岁或以上</span>
              </div>
              <div >
                <Stepper
                  value={manvalue}
                  onChange={val => setmanvalue(val)}
                  min={0}
                  className={count}
                  defaultValue={0}
                />
              </div>
            </div>
            <div className={peopleItem}>
              <div className={peoples}>
                <b>儿童</b>
                <span>2 - 12 岁</span>
              </div>
              <div >
                <Stepper
                  min={0}
                  onChange={val => setchildvalue(val)}
                  value={childvalue}
                  className={count}
                  defaultValue={0}
                />
              </div>
            </div>
            <div className={peopleItem}>
              <div className={peoples}>
                <b>婴儿</b>
                <span>2 岁以下</span>
              </div>
              <div >
                <Stepper
                  onChange={val => setbabyvalue(val)}
                  value={babyvalue}
                  min={0}
                  className={count}
                  defaultValue={0}
                />
              </div>
            </div>
            <div className={peopleItem}>
              <div className={peoples}>
                <b>宠物</b>
                <span>需要携带服务类宠物？</span>
              </div>
              <div >
                <Stepper
                  onChange={val => setpetvalue(val)}
                  value={petvalue}
                  min={0}
                  className={count}
                  defaultValue={0}
                />
              </div>
            </div>
          </div>

        </div> : <div onClick={() => { setShowMap(false); setShowDate(false); setShowPeople(true) }} className={small} style={{ padding: smallP, height: smallH }}><span>人员</span><span>{pepole}</span></div>
      }
    </div>
    <div className={bottom} style={{ marginTop: bottomT }}>
      <u onClick={() => { setPlace("随便看看"); setDate("添加日期"); setPeople("添加房客/参与者") }}>清除全部</u> <button onClick={() => submit(true)}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{ display: "block", height: "16px", width: "16px", marginRight: "10px", fill: "currentcolor" }}><path d="M13 0a13 13 0 0 1 10.5 20.67l7.91 7.92-2.82 2.82-7.92-7.91A12.94 12.94 0 0 1 13 26a13 13 0 1 1 0-26zm0 4a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"></path></svg> 搜索</button>
    </div>
    <Popup
      visible={visible2}
      onMaskClick={() => {
        setVisible2(false)
      }}
      bodyStyle={{
        borderTopLeftRadius: '16px',
        borderTopRightRadius: '16px',
        minHeight: '88vh',
      }}
    >
      <div style={{ padding: "24px" }}>
        <div className={searchBox} >
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{ display: "block", height: "16px", width: "16px", marginRight: "10px", fill: "currentcolor" }}><path d="M13 0a13 13 0 0 1 10.5 20.67l7.91 7.92-2.82 2.82-7.92-7.91A12.94 12.94 0 0 1 13 26a13 13 0 1 1 0-26zm0 4a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"></path></svg></div>
          <input type="text" placeholder='搜索目的地' value={searchPlace} onChange={e => setSearchPlace(e.target.value)} onKeyDown={e => {
            if (e.key === "Enter") {
              setVisible2(false)
              setShowMap(false)
              setShowDate(true)
              setPlace(searchPlace)
              setSearchPlace("")
            }
          }} />
        </div>
        <b style={{ display: "block", marginTop: "24px", marginBottom: "8px" }}>最近搜索</b>
        <ul className={historyBox}>
          {
            historyList && historyList.map((item: any) => <li onClick={() => submit(false,item)} key={item.id}>
              <div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{ display: "block", height: "22px", width: "22px", fill: "currentcolor" }}><path d="M16 .33a15.67 15.67 0 1 1 0 31.34A15.67 15.67 0 0 1 16 .33zm0 2a13.67 13.67 0 1 0 0 27.34 13.67 13.67 0 0 0 0-27.34zm1 3v10.1l8.74 5.04-1 1.73L15 16.58V5.33z"></path></svg></div>
              <p>
                <b>{item.place}</b>
                <span>{item.time}·{item.people}</span>
              </p>
              <u onClick={() => delHistory(item.id)}><DeleteOutline /></u>
            </li>)
          }
        </ul>
      </div>
    </Popup>
  </div >
}
export default Index